<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bebidas Indice</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
function cargarListaCompradas() {
	var losTr = document.getElementById("compradas")
		.getElementsByTagName("tbody")[0]
		.getElementsByTagName("tr");
	var miTr = losTr[0];
	
	var items = document.getElementById("compradas")
	.getElementsByTagName("tbody")[0]
	.getElementsByTagName("tr")[0]
	.childNodes;
	
	items[0].innerText = "1";
	items[1].innerText = "Gin";
	items[2].innerText = "20";
	
	var newRow = document.getElementById("compradas").insertRow(2);
	newRow.insertCell(-1).innerText = "2";
	newRow.insertCell(-1).innerText = "Vodka";
	newRow.insertCell(-1).innerText = "30";
	
	
	
}
</script>
</head>
<body>

<h1>Listado de bebidas de "El bar"</h1>
<ul>
	<li>Bebida 1</li>
	<li>Bebida 2</li>
</ul>

<h2>Bebidas en promo</h2>
<button onclick="leido(this)">Leido</button>
<ul class="alerta">
	<li>Bebida 3</li>
	<li>Bebida 4</li>
</ul>

<h2>Bebidas compradas anteriormente</h2>
<div style="width: 300px;">
<button onclick="cargarListaCompradas(this)">Cargar</button>

<table class="CSSTableGenerator" id="compradas">

<thead>
<tr><th>Cantidad</th><th>Nombre</th><th>Precio</th></tr>
</thead>

<tbody>
<tr><th>N</th><td>BB</td><td>15 ARS</td></tr>
</tbody>

<tfoot><tr><th colspan="3" >N compradas total</th></tr>

</table>

</div>

</body>
</html>